import React, { useState } from "react";
import { Button, Drawer, Divider, Flex, Switch } from "antd";
import { SyncOutlined, SettingOutlined } from "@ant-design/icons";
import { connect } from "react-redux";
import {
  setTagsViewsStatus,
  setBreadCrumbStatus,
  setFixedHeaderStatus,
  setSideThemeStatus,
  setDynamicTitleStatus,
  setShowLogoStatus,
  setSaveSettings,
} from "@/redux/modules/settings";
import { modalLoading } from "@/utils/common";
import "./index.less";
import checkDark from "@/assets/images/dark.svg";
import checkLight from "@/assets/images/light.svg";
export const SettingDrawer = (props) => {
  const {
    openDrawer = false,
    onCloseDrawer,
    tagsViewsStatus,
    breadCrumbStatus,
    fixedHeaderStatus,
    sideThemeStauts,
    dynamicTitleStatus,
    showLogoStatus,
    setTagsViewsStatus,
    setBreadCrumbStatus,
    setFixedHeaderStatus,
    setSideThemeStatus,
    setDynamicTitleStatus,
    setShowLogoStatus,
    setSaveSettings,
  } = props;

  const [tags, setTags] = useState(tagsViewsStatus);
  const [breadcrumb, setBreadcrumb] = useState(breadCrumbStatus);
  const [fixedHeader, setFixedHeader] = useState(fixedHeaderStatus);
  const [sideTheme, setSideTheme] = useState(sideThemeStauts);
  const [dynamicTitle, setDynamicTitle] = useState(dynamicTitleStatus);
  const [showLogo, setShowLogo] = useState(showLogoStatus);
  const onClose = () => {
    onCloseDrawer(false);
  };

  const handleTheme = (val) => {
    setSideTheme(val);
    setSideThemeStatus(val);
  };

  const onChangeTags = (checked) => {
    // console.log("checked", checked);
    setTags(checked);
    setTagsViewsStatus(checked);
  };

  const onChangeBreadcrumb = (checked) => {
    // console.log("checked", checked);
    setBreadcrumb(checked);
    setBreadCrumbStatus(checked);
  };

  const onChangeFixedHeader = (checked) => {
    setFixedHeader(checked);
    setFixedHeaderStatus(checked);
  };

  const onChangeDynamicTitle = (checked) => {
    setDynamicTitle(checked);
    setDynamicTitleStatus(checked);
  };

    const onChangeShowLogo = (checked) => {
    setShowLogo(checked);
    setShowLogoStatus(checked);
  };

  const handleSubmitSetting = () => {
    // setTagsViewsStatus(tags);
    // setBreadCrumbStatus(breadcrumb);
    // setFixedHeaderStatus(fixedHeader);
    // setSideThemeStatus(sideTheme);
    setSaveSettings(true);
    const closeLoading = modalLoading("正在保存配置到本地，请稍候...");
    setTimeout(() => closeLoading(), 1000);
  };

  const handleResetSetting = () => {
    setTagsViewsStatus(true);
    setBreadCrumbStatus(true);
    setFixedHeaderStatus(false);
    setSideThemeStatus("dark");
    setDynamicTitleStatus(false);
    setShowLogoStatus(true);
    setSaveSettings(false);

    modalLoading("正在清除配置缓存并刷新，请稍候...");

    setTimeout("window.location.reload()", 1000);
  };

  return (
    <div className="settingDrawer">
      <Drawer title="" closable={false} onClose={onClose} open={openDrawer}>
        <p className="settingDrawer-title">主题风格设置</p>
        <div className="setting-drawer-block-checbox">
          <div
            className="setting-drawer-block-checbox-item"
            onClick={() => handleTheme("dark")}
          >
            <img src={checkDark} alt="dark" />
            <div
              className="setting-drawer-block-checbox-selectIcon"
              style={{ display: sideTheme == "dark" ? "block" : "none" }}
            >
              <i aria-label="图标: check" className="anticon anticon-check">
                <svg
                  viewBox="64 64 896 896"
                  data-icon="check"
                  width="1em"
                  height="1em"
                  fill="#1677ff"
                  aria-hidden="true"
                  focusable="false"
                >
                  <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
                </svg>
              </i>
            </div>
          </div>
          <div
            className="setting-drawer-block-checbox-item"
            onClick={() => handleTheme("light")}
          >
            <img src={checkLight} alt="light" />
            <div
              className="setting-drawer-block-checbox-selectIcon"
              style={{ display: sideTheme == "light" ? "block" : "none" }}
            >
              <i aria-label="图标: check" className="anticon anticon-check">
                <svg
                  viewBox="64 64 896 896"
                  data-icon="check"
                  width="1em"
                  height="1em"
                  fill="#1677ff"
                  aria-hidden="true"
                  focusable="false"
                >
                  <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
                </svg>
              </i>
            </div>
          </div>
        </div>
        <Divider />
        <p className="settingDrawer-title">系统布局配置</p>
        <div className="settingDrawer-row">
          <div className="row-text">开启 TopNav</div>
          <div className="row-operation">
            <Switch checked={breadcrumb} onChange={onChangeBreadcrumb} />
          </div>
        </div>
        <div className="settingDrawer-row">
          <div className="row-text">开启 Tags-Views</div>
          <div className="row-operation">
            <Switch checked={tags} onChange={onChangeTags} />
          </div>
        </div>
        <div className="settingDrawer-row">
          <div className="row-text">固定 Header</div>
          <div className="row-operation">
            <Switch checked={fixedHeader} onChange={onChangeFixedHeader} />
          </div>
        </div>
        <div className="settingDrawer-row">
          <div className="row-text">显示 Logo</div>
          <div className="row-operation">
            <Switch checked={showLogo} onChange={onChangeShowLogo} />
          </div>
        </div>
        <div className="settingDrawer-row">
          <div className="row-text">动态标题</div>
          <div className="row-operation">
            <Switch checked={dynamicTitle} onChange={onChangeDynamicTitle} />
          </div>
        </div>
        <Divider />
        <Flex gap="small" wrap="wrap">
          <Button
            type="primary"
            icon={<SettingOutlined />}
            onClick={handleSubmitSetting}
          >
            保存配置
          </Button>
          <Button icon={<SyncOutlined />} onClick={handleResetSetting}>
            重置配置
          </Button>
        </Flex>
      </Drawer>
    </div>
  );
};
const settingStateToProps = (state) => ({
  tagsViewsStatus: state.useSettingStore.tagsViewsStatus,
  breadCrumbStatus: state.useSettingStore.breadCrumbStatus,
  fixedHeaderStatus: state.useSettingStore.fixedHeaderStatus,
  sideThemeStauts: state.useSettingStore.sideThemeStauts,
  dynamicTitleStatus: state.useSettingStore.dynamicTitleStatus,
  showLogoStatus: state.useSettingStore.showLogoStatus,
});

const settingDispatchToProps = (dispatch) => ({
  setTagsViewsStatus: (params) => {
    dispatch(setTagsViewsStatus(params));
  },
  setBreadCrumbStatus: (params) => {
    dispatch(setBreadCrumbStatus(params));
  },
  setFixedHeaderStatus: (params) => {
    dispatch(setFixedHeaderStatus(params));
  },
  setSideThemeStatus: (params) => {
    dispatch(setSideThemeStatus(params));
  },
  setDynamicTitleStatus: (params) => {
    dispatch(setDynamicTitleStatus(params));
  },
  setShowLogoStatus: (params) => {
    dispatch(setShowLogoStatus(params));
  },
  setSaveSettings: (params) => {
    dispatch(setSaveSettings(params));
  },
});
export default connect(
  settingStateToProps,
  settingDispatchToProps
)(SettingDrawer);
